<div ng-init="vm.init();refresh(vm.callback);">
  <script id="opt-toolbar" type="text/ng-template">
    <div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-file-o"></i> 文件 <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><button type="button" class="btn btn-default btn-block" ngf-select="vm.open($file)"
              ngf-accept="'.md'">打开</button></li>
          <li class="divider"></li>
          <li><button type="button" class="btn btn-default btn-block" ng-click="vm.save()"
              ng-if="sessionUser.role && vm.filepath">保存</button></li>
          <li><button type="button" class="btn btn-default btn-block" ng-click="vm.saveAs()">另存为</button></li>
          <li class="divider"></li>
          <li><button type="button" class="btn btn-default btn-block" ng-click="vm.saveAs('png')">导出（PNG）</button></li>
          <li><button type="button" class="btn btn-default btn-block" ng-click="vm.saveAs('pdf')">导出（PDF）</button></li>
          <li><button type="button" class="btn btn-default btn-block" ng-click="vm.saveAs('html')">导出（HTML）</button></li>
        </ul>
      </div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-pencil"></i> 编辑 <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><button id="copy" class="btn btn-default btn-block" type="button"
              ng-disabled="vm.code == ''">复制</button></li>
          <li class="divider"></li>
          <li><button class="btn btn-default btn-block" type="button" ng-click="vm.clear()">清除</button></li>
        </ul>
      </div>
      <button type="button" ng-if="sessionUser.role" class="btn btn-default" ng-click="vm.publish()"
          ng-disabled="vm.code == ''"><i class="fa fa-share-alt"></i> 发布</button>
      <go-back replace="true"/>
    </div>
  </script>
  <div class="row x-view-body" ng-class="{'x-hidebar': !vm.preview,'x-full-screen': vm.fullScreen}" movezone="{ratio:-1}">
    <div class="x-grid" ng-class="{'col-md-12 x-full-grid': !vm.preview, 'col-md-6': vm.preview}">
      <div class="x-view-scope">
        <div class="x-editor">
          <pre id="mdcode-editor"></pre>
        </div>
      </div>
    </div>
    <div class="x-grid" ng-class="{'hidden': !vm.preview, 'col-md-6': vm.preview}">
      <div class="x-view-scope">
        <div class="x-markdown">
          <p markdown-to-html="vm.code"></p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="mdcode-editor-tools">
    <div class="x-editor-tool" style="width:506px">
      <div class="x-toolbar btn-group">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="标题">
            <i class="fa fa-header"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu x-font-list">
            <li ng-repeat="size in [1, 2, 3, 4, 5, 6]" ng-click="vm.insert('header', size)">
              <a href="javascript:void(0)" class="h{{size}}">H{{size}}</a></li>
          </ul>
        </div>
        <button class="btn btn-default" ng-click="vm.insert('bold')" title="粗体"><i class="fa fa-bold"></i></button>
        <button class="btn btn-default" ng-click="vm.insert('italic')" title="斜体"><i class="fa fa-italic"></i></button>
        <button class="btn btn-default" ng-click="vm.insert('list')" title="列表"><i class="fa fa-list"></i></button>
        <button class="btn btn-default" ng-click="vm.insert('table')" title="表格"><i class="fa fa-table"></i></button>
        <button class="btn btn-default" ng-click="vm.insert('link')" title="超链接"><i class="fa fa-link"></i></button>
        <button class="btn btn-default" ng-click="vm.insert('quote')" title="引用"><i class="fa fa-quote-left"></i></button>
        <button class="btn btn-default" ng-click="vm.insert('image')" title="图片"><i class="fa fa-image"></i></button>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="代码">
            <i class="fa fa-code"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu x-font-list">
            <li ng-click="vm.insert('code', 'line')"><a href="javascript:void(0)">单行代码</a></li>
            <li ng-click="vm.insert('code', 'block')"><a href="javascript:void(0)">代码块</a></li>
            <li class="divider"></li>
            <li ng-click="vm.insert('code', 'flow')"><a href="javascript:void(0)">流程图</a></li>
            <li class="divider"></li>
            <li ng-click="vm.insert('code', 'inline')"><a href="javascript:void(0)">行内公式</a></li>
            <li ng-click="vm.insert('code', 'display')"><a href="javascript:void(0)">独立公式</a></li>
          </ul>
        </div>
        <button class="btn btn-default" ng-click="vm.insert('emoji')" title="表情符号"><i class="fa fa-smile-o"></i></button>
        <button class="btn btn-default" ng-click="vm.fnPreview()" title="预览">
          <i class="fa" ng-class="{'fa-eye': vm.preview, 'fa-eye-slash': !vm.preview}"></i></button>
        <button class="btn btn-default" ng-click="vm.fnFullScreen()" title="{{vm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i></button>
        <div class="btn btn-default btn-draggable" title="拖拽"><i class="fa fa-arrows"></i></div>
      </div>
    </div>
    <div class="x-editor-tool x-goto-top hidden">
      <div class="x-toolbar">
        <button type="button" class="btn btn-default btn-circle btn-lg" ng-click="vm.gotoTop()" title="回到顶部">
          <i class="fa fa-arrow-up"></i></button>
      </div>
    </div>
  </script>
</div>
